<% include ../layouts/navigation-bar-dashboard %>

<main class="container general-container">
    <div class="row h-100">
        <div class="col-12 my-auto">
            <% include ../../../layouts/wait %>
            <% include ../../../layouts/flash-message %>
            <div class="row">
                <div id="change-pass-secure-rec" class="col-12 col-md-8 offset-md-2 col-lg-6 offset-lg-3">
                    <h5 class="mb-5 text-center">Change Password</h5>
                    <form id="form-secure-rec-change-pass">
                        <div class="form-row mb-2">
                            <div class="form-group col-12 mb-4">
                                <label class="service-form-label mb-2">Old Password</label>
                                <input id="oldPassword" class="form-control service-form-input" type="password" name="oldpassword" placeholder="Old Password">
                            </div>
                            <div class="form-group col-12 mb-4">
                                <label class="service-form-label mb-2">New Password</label>
                                <input id="password" class="form-control service-form-input" type="password" name="password" placeholder="Password" passwordCheck="passwordCheck">
                            </div>
                            <div id="password-conditions" data-toggle="collapse" aria-expanded="false" class="collapse container mb-4">
                                <p class="mt-2"><i id="uppCond" class="fas fa-check-circle"></i> At least one uppercase character</p>                         
                                <p><i id="lowCond" class="fas fa-check-circle"></i> At least one lowercase character</p>                     
                                <p><i id="numCond" class="fas fa-check-circle"></i> At least one number </p>
                                <p><i id="speCond" class="fas fa-check-circle"></i> At least one special character (!.@#$/%^&*?)</p>        
                                <p><i id="lenCond" class="fas fa-check-circle"></i> At least 8 characters</p>          
                            </div>
                            <div class="form-group col-12 mb-4">
                                <label class="service-form-label mb-2">Repeat password</label>
                                <input id="passwordRepeat" class="form-control service-form-input" type="password" name="passwordRepeat" placeholder="Password confirmation">
                            </div>
                        </div>
                    </form>
                    <div class="form-row mt-4 mb-5">
                        <div class="col-6 offset-3">
                            <button id="change-pass-btn" type="button" class="btn btn-primary btn-block">Change password</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

<% include ../../../layouts/footer %>